<script setup>
import { getArticleInfoAPI, getAdditionalListAPI } from '@/api/tools'
import {copy} from '@/components/copy'

const route = useRoute()
const articleId = ref()
const article = ref()
const str = ref('')
const additionalList = ref()
const choostAddition = ref([])
const btnText = ref('复制')


articleId.value = route.params.id
if (articleId.value !== undefined) {
    getArticleInfo()
}

// 获取详情
async function getArticleInfo() {
    await nextTick()

    const res = await getArticleInfoAPI({
        articleId: articleId.value
    })
    article.value = res.data.value.data
    article.value.circleTitle = article.value.title.substring(0, 4)
    article.value.content = JSON.parse(article.value.content)
    article.value.content = article.value.content.map((str, index) => {
        let [key, value] = str.split(':');
        return { [`key`]: key, [`value`]: value };
    });
    article.value.classId = article.value.forumAtricleClassVOList[0].classId
    getAdditionalList()
}


function submit() {
    // 遍历用户输入内容数组，依次替换模板中的占位符
    let renderedString = article.value.template;
    article.value.content.forEach(input => {
        const placeholder = `{${input.key}}`;
        renderedString = renderedString.replace(placeholder, input.value);
    });
    str.value = renderedString
    if (choostAddition.value.length > 0) {
        str.value = str.value + '以'
        choostAddition.value.forEach(item => {
            additionalList.value.forEach(item2 => {
                if (item === item2.id) {
                    // console.log(item);
                    str.value += item2.conditionName + ' '
                }
            })
        })
        str.value = str.value + '形式。'
    }
}

async function getAdditionalList() {
    const res = await getAdditionalListAPI({
        classId: article.value.forumAtricleClassVOList[0].classId
    })
    // console.log(res.data.value.data);
    additionalList.value = res.data.value.data
}

function addList(items) {
    const index = choostAddition.value.indexOf(items.id); // 检查 items.id 是否存在于 choostAddition.value 中
    if (index !== -1) {
        // 如果 items.id 存在于 choostAddition.value 中，则删除它
        choostAddition.value.splice(index, 1);
    } else {
        // 如果 items.id 不存在于 choostAddition.value 中，则添加它
        choostAddition.value.push(items.id);
    }
}

// 复制内容
async function copys(){
    copy(str.value)
    btnText.value = '已复制'
    alert('复制成功')
}


</script>

<template>
    <div class="body">
        <div class="app-nav">
            <!-- 面包屑 -->
            <div class="crumbs">
                <ul>
                    <li>当前位置：</li>
                    <NuxtLink to="/" class="crumbs-a">
                        <li>首页</li>
                    </NuxtLink>
                    <li>/</li>
                    <NuxtLink to="/tools" class="crumbs-a">
                        <li>工具</li>
                    </NuxtLink>
                    <li>/</li>
                    <li>视频剪辑</li>
                </ul>
            </div>
            <div class="tools-title">
                <div class="tools-box-nav-title">
                    <!-- {{ article?.circleTitle }} -->
                      <img src="../../static/icon.png" alt="">
                </div>
                <div class="tools-box-nav-content">
                    <div class="tools-box-nav-content-title">
                        {{ article?.title }}
                    </div>
                    <div class="tools-box-nav-content-text">
                        {{ article?.introduction }}
                    </div>
                </div>
            </div>
            
            <!-- 主题 -->
            <div class="tools-nav">
                <div class="tools-nav-form">
                    <ul>
                        <li class="tools-nav-form-box" v-for="(item, index) in article?.content">
                            <div class="tools-nav-form-title">
                                {{ item.key }}
                            </div>
                            <div class="tools-nav-form-input">
                                <input type="text" class="input-style" v-model="item.value">
                            </div>
                        </li>

                    </ul>
                    <div class="tools-nav-form-addtitle" v-if="additionalList">
                        附加条件
                    </div>
                    <div class="tools-nav-form-addbox" v-if="additionalList">
                        <div class="tools-nav-form-add" v-for="items in additionalList" @click="addList(items)"
                            :class="{ active: choostAddition.includes(items.id) }">
                            <div class="tools-nav-form-add-title">
                                {{ items.conditionName }}
                            </div>
                            <div class="tools-nav-form-add-content">
                                {{ items.conditionExplain }}
                            </div>
                        </div>
                    </div>
                    <div class="tools-nav-form-btn" @click="submit">
                        <img src="../../static/icon-ele.png" alt="" style="width: 16px;height: 16px;margin-right: 5px;">
                        立即生成
                    </div>
                </div>
                <div class="tools-nav-ai">
                    <div class="tools-nav-ai-title">
                        <div>
                            生成内容
                        </div>
                        <div class="tools-nav-ai-title-btn" @click="copys">
                            {{ btnText }}
                        </div>
                    </div>
                    <div class="tools-nav-ai-content">
                        <textarea v-model="str" placeholder="" placeholder-class="textarea-placeholder" @input=""
                            style="border: none; box-sizing: border-box; background: none; width: 100%; min-height: 425px;border-radius: 4px 4px 4px 4px;
border: 2px solid #5860F6;padding: 10px;font-size: 18px;" />
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

<style scoped>
.body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    /* background-color: #f2f3f5; */
    background: url('../../static/indexbg.png') center/cover;
}

ul {
    list-style: none;
}

.crumbs {
    width: 100%;
    max-width: 1170px;
    /* margin-top: 20px; */
    padding-top: 20px;
    padding-bottom: 20px;
    margin-left: 10px;
    font-family: PingFang SC, PingFang SC;
font-weight: 400;
}

.crumbs ul {
    display: flex;
    flex-direction: row;
    align-items: center;

}

.crumbs ul li {
    margin-right: 10px;
}

.crumbs-a {
    text-decoration: none;
    color: #4E5969;
}

.crumbs-a:hover {
    color: #655aec;
}

.app-nav {
    width: 100%;
    max-width: 1170px;
    margin: 0 auto;
}

.tools-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-top: 20px;
    /* box-shadow: 0 2px 30px #0003; */
    padding: 10px;
    border-radius: 10px;
    /* justify-content: center; */
}

.tools-box-nav-title {
    flex: 0 0 auto;
    border-radius: 60px;
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #655aec;
    color: #fff;
    font-size: 18px;
    margin-right: 20px;
}

.tools-box-nav-content {
    margin-left: 10px;
}

.tools-box-nav-content-title {
    font-size: 24px;
    overflow: hidden;
    font-weight: 600;
}

.tools-box-nav-content-text {
    color: #a0a3bd;
    font-size: 16px;
    overflow: hidden;
    font-weight: 400;
}

.tools-nav {
    width: 100%;
    max-width: 1170px;
    display: flex;
    flex-direction: row;
    margin-top: 20px;
    margin-bottom: 50px;
    background: #FFFFFF;
box-shadow: 0px 8px 32px 0px rgba(0,0,0,0.08), 0px 2px 20px 0px rgba(0,0,0,0.04);
border-radius: 8px 8px 8px 8px;
}

.tools-nav-form {
    width: 100%;
    max-width: 560px;
    margin-right: 10px;
    padding: 20px;
    /* box-shadow: 0 2px 30px #0003; */
    border-radius: 10px;
    background-color: #fff;
}

.tools-nav-ai {
    width: 100%;
    max-width: 560px;
    padding: 20px;
    border-radius: 10px;
    /* box-shadow: 0 2px 30px #0003; */
    background-color: #fff;
}

.tools-nav-form-title {
    font-size: 14px
}

.input-style {
    padding: 6px;
    width: 100%;
    max-width: 411px;
    font-weight: 400;
    /* border-radius: 10px; */
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #ccc;
    font-size: 12px
}

.tools-nav-form-input {
    margin-top: 5px;
}


.tools-nav-ai-content {
    margin-top: 10px;
    padding: 5px;
    height: auto;
    /* background-color: #f2f3f5;
    border-radius: 10px; */
    overflow: hidden;
    background: #FAFAFA;
/* border-radius: 4px 4px 4px 4px;
border: 2px solid #5860F6; */
}

.tools-nav-form-btn {
    /* width: 100%; */
    max-width: 600px;
    margin-top: 20px;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1A25F3;
    color: #fff;
    font-weight: 400;
    border-radius: 10px;
    cursor: pointer;
    font-family: PingFang SC, PingFang SC;
}

.tools-nav-form-btn:hover {
    background-color: #fc2f70;
    cursor: pointer;
}

.tools-nav-form-box {
    margin-top: 10px;
}

.tools-nav-form-addtitle {
    margin-top: 10px;
    font-size: 14px;
}

.tools-nav-form-addbox {
    display: flex;
    flex-direction: row;
    margin-top: 10px;
    flex-wrap: wrap;
}

.tools-nav-form-add {
    width: 120px;
    height: 150px;
    background-color: #fff;
    box-shadow: 0 0 5px #ccc;
    border-radius: 10px;
    border: 1px solid #cccccc00;
    /* padding: 10px; */
    /* float: left; */
    margin-left: 10px;
    margin-top: 10px;
    cursor: pointer;
}

.tools-nav-form-add-title {
    padding-top: 10px;
    width: 100%;
    border-bottom: 1px solid #fff;
    text-align: center;
    font-size: 14px;
}

.tools-nav-form-add-content {
    word-wrap: break-word;
    word-break: normal;
    /* width: 100%; */
    padding: 5px;
    color: #8f9eb3;
    font-size: 12px;
    overflow-y: auto;
    height: 100px;
    scrollbar-width: thin;
}

.active {
    border: 1px solid #655aec;
}

.tools-nav-ai-title {
    font-family: PingFang SC, PingFang SC;
font-weight: 600;
font-size: 16px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.tools-nav-ai-title-btn{
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: 1px solid #333; */
    /* padding: 10px; */
    /* padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px; */
    border-radius: 20px;
    cursor: pointer;
    width: 62px;
    height: 29px;
    border: 1px solid #5860F6;
    color: #5860F6;
}

.tools-nav-ai-title-btn:hover{
    color:#655aec;
    border: 1px solid #655aec;
}


@media (max-width: 992px) {
    .tools-nav {
        flex-direction: column;
        margin-right: 0;
    }

    .tools-nav-form {
        box-sizing: border-box;
    }

    .tools-nav-ai {
        box-sizing: border-box;
        margin-top: 20px;
    }

    .tools-nav-form-btn {
        padding: 10px;
    }
}
</style>